<template>
  <div>
    <div id="UEgineContainer"></div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted,  ref } from "vue"

  let UE: any = {}
  onMounted(() => {
    initUE()
    initModel()
    console.log(UE)
  })

  const token = "1a17098ce0d527114f73427bdfb5033633aa4802e15dfc49a29aa59c8f2497fa711bc068a62def56e79b0f4c61588fb258f53b51443014e346435547398e0dd1598f66f51240e4bcc581ac8bda0b423bd53bbb94b89a5998e2877d468721051d28a57a569b31ede66f76458a952a2e873e48b5f9abd44c77c08b9ae61d1cfe4f69c40d0b586b1b25e517995afd78190af6b34a0d3b48e62299da383acb371030673a18f4f42a3e1ef21654bc56ed57d610df6c47a708c020420446a051fcfcfe6420a895151316b4e44d99e23ea1b1c037469c16f332fc0e0d4d42f852f24a3b893d0b7782ccdf4a2690c9c477d6c137ce7a6540f9cf4af6da3042080cb32ebaca86b3d3b04340f339b11b3331e22197ad369ae9518ca64971bf6546087c6d2fa49260085f53fca849090a7c8136ccb83ca940e6e6a84d109eba3c06241aa082c5c2996573ea435dd6e6b49265415e74258c47f45b34485a2edb350010e2f42cd5b388af45c6b070e5bdce7cde8509803ac0f4c2c1cff192e8ef2a45d5b01d34fbf7d4f5468a9b90538b4c40216209da16cf1aa3a910f4f6b2490d7e53a61b134e8b9198f3fb0c61dcb304ffda7c15dd8a94867b381ae88ecd6668e8ca6b6d286dce7e5d799b0a175d5afe5554a4332253f0c4f5c9bdb3460b24efac7833fbd879ac113cff3fb054dd3d9847dab3083295237b2e100376c0f81b95abdf8d437c4965454914fcc7b07d28062bc2976948356e76d9d11fd5b479eb391b46cc93e6e04d2a05d8b5cf9a9c52f2cecbb34650628a5a2ae01fdcdf023535fe1db233633ae24d1650ef196ed32b1cdbecb9bf3ae2651ff226b8a2383977aeaabb9225d7ca0cc6b8b5b7e40751d2e0212a534b5d37e40a524d2bbb8599a991777d21e7823e88c9264a91404ad3c355b1486472d2d33d202482561817790d78451be0e6b7705bf3235783e54e6a27862db6f85eca3f844359b085af187d453436628b776f17b592e82465766524d976e07cb995f7aeea64611acbe5c7d9860cc2d77c9674b868cd5190eb2aca665e8d49164a81ede6cd674b6676107fcd8d1e3b80a9b6b7a5c7ac8f0679f3e5b868cd5190eb2aca38576765f91ec238ee82936c61d01069dfc4840ac1126277417910a2ed0df6e3ca2026459a491059689206d702832f51e10cd5e6b36e851929e3fc5967db22b16c69755ac3a39199b4f7334f4c0447de753151533a277044a6403869fa3023ab70e2ffb0f223e4e25b57832ce7d3786a0237e96c5e978f014dc3bda33a30522cafafd0506174e868ad58c88e87a3bfc1adeec5c3f01c764a7eef57c31ba4a93364d53d967da98ab0259c4f12d293f9775b57832ce7d3786a0237e96c5e978f0184b9cf9eccaf74966c69755ac3a39199cb6b0c9432a8108f92d9949fecb5637aafafd0506174e86892c40eb4489ad0f6753151533a277044115de6bee8bee65d5b57832ce7d3786aaa6f88a2ee8f5f60cf14829a5847f70377d6c12f1649400fcab44f4ff52989cf214f8b93be10da84253a49595b8ffa60e29586b86ee4d866c8ffcb81b934e9b51cd8670938da55d3ee5940a08809fab6f7c0a1702e2a8a95cc2ddffad05ffd7c7b7134e53eaa4f83b046182095e9d992f79b33aea9c3effbffbe7fd817b3e44233aa4802e15dfc49a29aa59c8f2497fa711bc068a62def56d808954784665c69495a0ca0fe7add949f5466b3f6e2243af592a64211baf0bb4ed238487e4629f3c22c74d49cd32083511c1aaa7953196f2c26d8a66e140f11b14dcd99af67c18df69087bf57c16c40ebc424f09f933d0eb1a881ed05ca8d5c665e8d49164a81ede6cd674b6676107f753151533a277044b644d89a77efad286dee59796b124081510f8a6ea5c1dff9cb0f31d9a93422d1de95a0001376b8d685af667dd7ebaf4bdfc4840ac1126277417910a2ed0df6e3ca2026459a491059fef60f7421599dd6f96b87b99f2b3a0e241e69a6993bcca387380d5ea2d8e07738930dbe9049f2ae"
  const modelPath = "/model/202305261528056862/root.glt"
  const modelId = "h"

  // BIM场景初始化
  function initUE() {
    const defaults_UE = {
      container: "UEgineContainer",
      showfps: true,
      openearth: false,
      openterrain: false,
      loading: true,
      bgcolor: "#2c313c",
      selectedcolor: "#FFFF00",
      throughwall: true,
      editmode: true,
      isRequestWebgl2: false,
      colorBlendMode: 1,
      secretkey: token
    }
    UE.api = new API(defaults_UE)
  }

  // 加载模型
  function initModel() {
    UE.api.Model.add(
      modelPath,
      modelId,
      function (data: any) {
        console.log('模型开始加载回调函数', data)
      },
      function (data: any) {
        console.log("加载用时" + data.time / 1000 + "秒")
        UE.api.Public.event("LEFT_CLICK", function (click: { position: any; }) {
          UE.api.Feature.getByEvent(click.position, function (json: any) {
            console.log(json)
          })
        })
      },
      {
        flyto: true
      }
    )
  }

  // 相机初始化
  function initCamera() {
    UE.api.Camera.setCameraOptions({
      enableLook: false,
      enableRotate: true,
      enableTranslate: true,
      enableZoom: true
    })
  }
</script>

<style>
  #UEgineContainer {
    width: 90vw;
    height: 90vh;
    border: 1px solid black;
    position: relative;
  }
</style>